<template>
   <div class="user">
    <!-- 科室字典 -->
    <div class="header">
      <el-row>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <img
              class="user-img"
              src="https://s1.ax1x.com/2022/10/25/xR4D9x.png"
              alt=""
            />
            <span class="user-span">科室字典</span>
          </div></el-col
        >
        <el-col :span="15"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>

        <el-col :span="5">
          <div class="grid-content bg-purple" @click="addEditor=true">
            <div class="addList">
                <span>添加</span>
            </div>
            </div
        ></el-col>
      </el-row>
    </div>
    <div class="user-list">
      <el-table :data="tableData" style="width: 1100px">
      <el-table-column  width="700">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column  width="150">
        <el-checkbox>会诊科室</el-checkbox>
      </el-table-column>
      <el-table-column  width="150">
          <el-checkbox>转诊科室</el-checkbox>
      </el-table-column>
      <el-table-column>
        <template  @click="aaa=true">
          <el-button size="mini" @click="addEd=true"
            >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!-- 添加 -->
    <div class="theEditor" v-show="addEditor">
          <div class="header-head">
            <span>编辑</span>
            <img src="https://s1.ax1x.com/2022/10/27/xfgm7R.png" alt="" @click="addEditor=false" />
          </div>
          <div class="chegatpassword">
            <span>科室</span>
            <br />
            <!-- 科室输入框 -->
            <select name="" id="">
              <option value="1">自行添加数据</option>
            </select>
         </div>
         <div class="chegatpassword">
            <span>类型</span>
            <br />
            <el-checkbox>会诊科室</el-checkbox>
            <el-checkbox>转诊科室</el-checkbox>
         </div>
          <div class="confirm">
            <button class="save">保存</button>
            <button class="cancel"  @click="addEditor=false" >取消</button>
          </div>
        </div>
    <!-- 操作 -->
    <div class="theEditor" v-show="addEd">
          <!-- 遮罩层 -->
          <div class="MaskLayer" v-show="Mask"> 
            <div class="confirmdelete">
              <p>确认删除吗？</p>
              <br>
              <div class="btn">
                <button>确认</button>
                <button @click="Mask=false">取消</button>
              </div>
            </div>
          </div>
          <div class="header-head">
            <span>编辑</span>
            <img src="https://s1.ax1x.com/2022/10/27/xfgm7R.png" alt="" @click="addEd=false"/>
          </div>
          <div class="chegatpassword">
            <span>科室</span>
            <br />
            <!-- 122122112 -->
            <select name="" id="">
              <option value="1">自行添加数据</option>
            </select>
         </div>
         <div class="chegatpassword">
            <span>类型</span>
            <br />
            <el-checkbox>会诊科室</el-checkbox>
            <el-checkbox>转诊科室</el-checkbox>
         </div>
          <div class="confirm">
            <button class="save">保存</button>
            <button class="deletes" @click="Mask=true">删除</button>
            <button class="cancel" @click="addEd=false">取消</button>
          </div>
        </div>
  </div>
</template>

<script>
export default {
    name:'department',
    data() {
      return {
        checked: false,
        addEditor:false,
        addEd:false,
        Mask:false,
        spital:false,
        tableData: [
        {
          name: "小儿泌尿科",

        },
      ],
      }
    },
    methods:{
     
    }
}
</script>

<style lang="less" scoped>
ul li {
  list-style: none;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  text-align: center;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.header {
  height: 60px;
  box-sizing: border-box;
  margin-left: 30px;
  padding: 17px;
}
.user-span {
  position: relative;
  top: -7px;
  margin-left: 10px;
  font-size: 14px;
}
.user-select {
  margin-top: 5px;
}
.user-input {
  width: 248px;
  height: 25px;
  margin-top: 4px;
  border-radius: 15px;
  border: 1px solid #ccc;
}
// list
.user-list {
  width: 1100px;
  margin-left: 102px;
}
.grid {
  border-radius: 4px;
  min-height: 36px;
  text-align: left;
  margin-left: 70px;
}
.persList{
  height: 50px;
  margin-left:100px;
  padding-top: 14px;
  box-sizing: border-box;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  li {
    float: left;
    margin-right: 180px;
    color: #333333;
  }
  li:last-child{
    color: #199ed8;
  }
}
.addList{
    width: 60px;
    height: 30px;
    margin: 0 auto;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
.nav{
  width: 224px;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -114px 0 0 -140px;
  border: 1px solid #ccc;
  .head{
    height: 25px;
    background: #f2f2f2;
    box-sizing: border-box;
    padding: 3px 5px 0 5px;
    span{
      font-size: 14px;
    }
    img{
      float: right;
    }
  }
  .modify{
    height: 90px;
    margin-top:17px ;
    ul li{
      margin-left: -30px;
    }
    ul li input{
      z-index: 4;
      width: 90%;
    }
  }
  button{
    float: right;
    margin-right: 15px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    width: 65px;
    height: 25px;
    background: #169bd5;
  }
  
}
.theEditor {
  width: 224px;
  height: 180px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -114px;
  margin-left: -140px;
  .header-head {
    height: 32px;
    background: #f2f2f2;
    span {
      display: inline-block;
      margin: 6px 0 0 10px;
      font-size: 15px;
    }
    img {
      float: right;
      margin-top: 6px;
      margin-right: 10px;
    }
  }
  .chegatpassword {
    height: 40px;
    margin: 10px 0 10px 0;
    span {
      color: #333333;
      font-size: 14px;
      margin: 0 0 0 12px;
    }
    input {
      width: 90%;
      margin-left: 10px;
    }
    select{
      width: 93%;
      margin-left: 10px;
    }
  }
  .theHospital{
    width: 224px;
    height: 163px;
    position: absolute;
    left: 100%;
    border: 1px solid #ccc;
    .search{
      width: 90%;
      height: 24px;
      border-radius: 15px;
      border: 1px solid #ccc;
      margin: 10px 0 0 10px;
      input{
        width: 150px;
        margin: 2px 0 0 5px;
        border: 0;
        outline:none;
      }
      img{
        float: right;
        margin: 3px 7px 0 0;
      }

    }
    ul li{
      margin-left: -15px;
    }
  }
  .confirm{
      height: 30px;
      display: flex;
      justify-content: right;
      margin-top: 15px;
      button{
        width: 65px;
        border: 0;
        border-radius: 5px;
        color: #fff;
        margin-right: 5px;
      }
      .save{
        background:#169bd5 ;
      }
      .deletes{
        background:red ;
        margin: 0 5px 0 5px;
      }
      .cancel{
        background:#ccc ;
      }
    }
}
.MaskLayer{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #adadad;
    opacity:80%;
    z-index: 4;
    .confirmdelete{
      width: 100%;
      height: 100px;
      margin-top: 20%;
      p{
        text-align: center;
        color: #fff;
        font-size: 14px;
      }
      .btn{
        width:100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        button{
          width: 65px;
          height: 25px;
          margin-left: 10px;
          background: red;
          border: 0;
          border-radius: 5px;
          color: #fff;
          font-size: 14px;
        }
        button:last-child{
          background: #f2f2f2;
          color: #000;
        }
      }
    }
}
</style>